<template>
    <div class="page">
        <div class="userWrap">
            <div class="head">
                <a class="edit" @click="jump('edituser.html')"><img src="./../assets/user/edit.svg"/></a>
                <div class="headInfor">
                    <div class="headFace"><img :src="defaultHead"/></div>
                    <h2>{{user.nickName || '暂无昵称'}}</h2>
                    <p v-show="user.province">{{user.province}} / {{user.city }}</p>
                    <div class="flex-container mInfor">
                        <a>
                            <h3>0</h3>
                            <p>积分</p>
                        </a>
                        <a>
                            <h3>0.00元</h3>
                            <p>账户余额</p>
                        </a>
                    </div>
                </div>
            </div>
            <ul class="centerList">
                <li @click="jump('orderlist.html')"><img src="./../assets/user/1.png"/>我的订单</li>
                <li @click="jump('MyTicketList.html')" class="liBot"><img src="./../assets/user/2.png"/>我的人次票</li>
                <li @click="jump('vipcard.html')"><img src="./../assets/user/3.png"/>会员</li>
                <li @click="jump('venuevipcard.html')" class="liBot"><img src="./../assets/user/4.png"/>会员卡</li>
                <li @click="jump('JoinCoach.html')"><img src="./../assets/user/5.png"/>{{ user.coach == null ? "加盟教练" : ( user.coach.State==1 ? "教练中心" : "加盟教练待审核" )}}</li>
                <li @click="jump('JoinReferee.html')"><img src="./../assets/user/6.png"/>加盟裁判</li>
                <li @click="jump('JoinVol.html')" class="liBot"><img src="./../assets/user/7.png"/>加盟志愿者</li>
                <li @click="jump('aboutus.html')"><img src="./../assets/user/8.png"/>关于我们</li>
                <li @click="jump('contactus.html')"><img src="./../assets/user/9.png"/>联系我们</li>
                <li @click="$router.push({path: '/feedback'})"><img src="./../assets/user/10.png"/>意见反馈</li>
            </ul>
        </div>
        <!--tabBar-->
        <div class="tabBarWrap">
            <div class="tabBar flex-container">
                <router-link to="/"><span></span><p>首页</p></router-link>
                <router-link to="/wallet"><span></span><p>钱包</p></router-link>
                <router-link class="active" to="/userCenter"><span></span><p>个人中心</p></router-link>
            </div>
            <div class="FitHeight20"></div>
        </div>
    </div>
</template>

<script>
    import utils from './../js/utils';
    export default {
        name: "userCenter",
        data(){
            return {
                defaultHead: require('../assets/user/defaultFace.png'),
                user: {}
            }
        },
        activated(){
            this.GetMyInfo();
        },
        methods:{
            /*
            * 获取用户信息
            * */
            GetMyInfo(){
                let that = this;
                utils.ajax({
                    url: utils.AJAX_SRC + 'Mine/GetMyInfo',
                    success(result){
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        that.user = result.data;
                        if(result.data.headImg) that.defaultHead = result.data.headImg;
                    }
                });
            },
            jump(href){

                if(href == 'JoinCoach.html'){
                    let url = this.user.coach == null ? "JoinCoach.html" : ( this.user.coach.State == 1 ? "usercentercoach.html" : "" );
                    if(!url){
                        utils.showTips('您申请加盟，请等待审核');
                        return;
                    }
                    href = url;
                }

                if(href == 'JoinReferee.html'){
                    let url = this.user.Referee == null ? 'JoinReferee.html' : '';
                    if(!url){
                        utils.showTips('已加盟裁判');
                        return;
                    }
                    href = url;
                }

                if(href == 'JoinVol.html'){
                    let url = this.user.Volunteer == null ? 'JoinVol.html' : '';
                    if(!url){
                        utils.showTips('已加盟志愿者');
                        return;
                    }
                    href = url;
                }
                location.href = 'http://feiyutiyu.cn/wap/' + href;
            }
        }
    }
</script>

<style scoped>
    .page{padding-top: 0;padding-bottom: 2.5rem;}
    .userWrap{background: #F0F8FF;}
    .head{height: 8rem;position: relative;background: url(./../assets/user/bg.png) no-repeat center / cover;}
    .edit{position: absolute;right: 0.75rem;top: 1.2rem;}
    .edit img{width: 1.2rem;}
    .headInfor{position: absolute;left: 50%;bottom: -2rem;background: #fff;width: 90%;
        margin-left: -45%;height: 6.5rem;border-radius: 0.3rem;text-align: center;font-size: 0.7rem;box-shadow: 0 0 4px #ccc;}
    .headFace > img{width: 3.6rem;margin-top: -2rem;border-radius: 50%;}
    .headInfor h2{font-size: 0.7rem;color: #333333;margin-top: 0.25rem;}
    .headInfor > p{color: #999;font-size: 0.6rem;}
    .mInfor a{flex: 1;}
    .mInfor h3{color: #e85739;}
    .mInfor p{color: #9e9ea0;font-size: 0.6rem;}
    .centerList{padding-top: 2.6rem;width: 90%;margin: 0 auto;padding-bottom: 1rem;}
    .centerList li{background: #fff url(./../assets/icon/arrow-right.svg) no-repeat 96% center / 0.6rem;position: relative;border-radius: 0.4rem;height: 2rem;line-height: 2rem;color: #666666;border-bottom: 1px solid #f1f1f1;}
    .centerList li.liBot{margin-bottom: 0.4rem;border-bottom: none;}
    .centerList img{height: 1.2rem;vertical-align: middle;margin: 0 0.5rem;}

</style>

